<template>
  <div class="checkout fixed-bottom bg-white bt-l">
    <div class="top flex-middle">
      <slot name="left"/>
      <div class="ml-auto pr-3">投 <input class="b-l" pattern="\d*" maxlength="4" v-model="times" onfocus="this.select()" @focusout="focusout" placeholder="倍数"> 倍</div>
    </div>
    <slot name="extra"/>
    <div class="bottom-action pr-3">
      <div class="text-center lh-13 my-1 px-3 br-l">
        <div>
          <i class="iconfont icon-money align-middle font-xxxl"></i>
          <small>余额</small>
        </div>
        <b v-if="subject">{{subject.currency}}</b>
        <b v-else>未登录</b>
      </div>
      <div class="ml-3 mr-auto">
        <div><b>{{bets}}</b>注<b>{{times}}</b>倍 共<b>{{bets * times * money}}</b>元</div>
        <slot name="tips" />
      </div>
      <b class="btn btn-danger" :disabled="disabled" @click="$emit('checkout', times)">确定</b>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'checkout',
  props: {
    disabled: Boolean,
    money: {type: Number, default: 2},
    value: {type: Number, default: 1},
    bets: Number
  },
  data () {
    return {
      times: this.value
    }
  },
  created () {
    this.$store.dispatch('refresh')
  },
  methods: {
    focusout () {
      if (this.times < 1 || isNaN(this.times)) {
        this.times = 1
      }
      this.$emit('input', parseInt(this.times))
    }
  },
  computed: {
    ...mapState({
      subject: 'subject'
    })
  }
}
</script>

<style lang="scss">
  @import "../../assets/css/theme";
  .checkout {
    b { color: $color-red }
    .top {
      line-height: 2.5rem;
      input {
        padding: .125rem .5rem;
        text-align: center;
        line-height: 1rem;
        color: $color-red;
        width: 3rem;
      }
    }
  }
</style>
